<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
    {include file="common_header"}
    <title>新注册用户统计</title>
</head>
<body>
<!--header结束-->
<div style="width: 100%;background-color: #fff;">
    <div class="qiyeguanli">
        <div style="width: 600px;margin: 50px 565px 0 565px">
            <input type="text" onfocus="WdatePicker()" value="{$begin}" placeholder="开始时间" id="begin" class="input-text Wdate" style="width:250px;">
            --
            <input type="text" onfocus="WdatePicker()"  value="{$end}" placeholder="结束时间" id="end"  class="input-text Wdate" style="width:250px;">
            <button type="button" class="btn btn-success" onclick="reload()"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
        </div>
        <div style=" width:1000px;margin:40px auto 0;height: 500px;" id="main">

        </div>
    </div>
</div>
{include file='common_footer'}
<script type="text/javascript" src="__AJS__echarts.min.js" ></script>
<script type="text/javascript">
    function reload() {
        $begin=$('#begin').val();
        $end=$('#end').val();
        goUrl('?begin=' + $begin+'&end='+$end);
    }
    var myCharta = echarts.init(document.getElementById('main'));
    var option = {
        title : {
            text: '新增加用户统计'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['新增用户']
        },
        toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: true},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data :''
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'新增商户',
                type:'bar',
                data:'',
                itemStyle: {
                    normal: {
                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
                                '#D7514B','#C6E559','#F4E011','#F0815A','#26C1C0'
                            ];
                            return colorList[params.dataIndex]
                        },
                        //以下为是否显示，显示位置和显示格式的设置了
                        label: {
                            show: true,
                            position: 'top'

                        }
                    }
                },
                //设置柱的宽度，要是数据太少，柱子太宽不美观~
                barWidth:70
            }
        ]
    };
    option.xAxis[0]['data']= {$time};
    option.series[0]['data']= {$num};
    // 为echarts对象加载数据
    myCharta.setOption(option);
    //绑定图表resize事件
    window.addEventListener("resize", function () {
        myCharta.resize();
    });
</script>
</body>
</html>